<template>
    <div class="body">
        <div class="i-box">
            <div class="left-nav">
                <div>
                    <el-row class="tac">
                        <el-col :span="3">
                            <el-menu
                                    default-active="2"
                                    class="el-menu-vertical-demo"
                                    @open="handleOpen"
                                    @close="handleClose">

                                <el-menu-item index="2" @click="choose(0)">
                                    <span slot="title">个人资料</span>
                                </el-menu-item>
                                <el-menu-item index="1">
                                    <span slot="title">我的收藏</span>
                                </el-menu-item>
                                <el-menu-item index="3">
                                    <span slot="title" @click="choose(2)">我的视频</span>
                                </el-menu-item>
                                <el-menu-item index="4" @click="choose(1)">
                                    <span slot="title">我的博客</span>
                                </el-menu-item>
                                <el-menu-item index="5">
                                    <span slot="title">我的论坛</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>

                    </el-row>
                </div>
            </div>
            <user-infomation class="show"></user-infomation>
            <my-blog class="show" style="display: none"></my-blog>
            <my-video class="show" style="display: none"></my-video>
        </div>
    </div>
</template>

<script>

   import userInfomation from "./userInfomation";
    import myBlog from "./myBlog";
    import myVideo from "./myVideo";
    export default {
        name: "information",
        data(){
            return{
                show:[true, false, false,false]
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            choose(i){
                let t = document.getElementsByClassName("show");
                for(let k = 0; k < t.length; k++){
                    t[k].style.display = "none";
                }
                t[i].style.display = "block";
            }
        },
        components:{
            userInfomation,
            myBlog,
            myVideo
        }
    }
</script>

<style scoped>

    .i-box{
        width: 1000px;
        margin: 0 auto;
    }
    .body{
        width: 100%;
        height: 1000px;
        background-color: #f5f6f7 !important;
    }
    .left-nav{
        padding-top: 20px;

    }


</style>